<template>
  <div class="body-box">
    <!-- 搜索 -->
    <el-form size="mini" :inline="true">
      <el-form-item label="组别" v-if="type == 1">
        <el-select v-model="group_id">
          <el-option v-for="(item,key) in team_list" :key="key" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input placeholder="请输入姓名或手机号码查询" v-model="mobile" style="width:200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="com-btn" icon="el-icon-search" @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <window-title title="报名列表"></window-title>
    <!-- 选项卡 -->
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="0">
        <span slot="label">
          全部
          <span class="tab-badge">{{all_num}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label">
          待审核
          <span class="tab-badge">{{verify_num}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">
          已同意
          <span class="tab-badge">{{agree_num}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label">
          已拒绝
          <span class="tab-badge">{{refuse_num}}</span>
        </span>
      </el-tab-pane>
    </el-tabs> -->
    
    <el-table
      size="mini"
      border
      :data="list.data"
      @selection-change="handleSelectionChange"
      v-loading ="load"
      style="margin-top:20px;"
    >
      <el-table-column type="selection" width="40" :selectable="setIsSelect"></el-table-column>
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column label="姓名" prop="form[0].value"></el-table-column>
      <el-table-column label="手机号" prop="form[1].value"></el-table-column>
      <el-table-column label="组别">
        <template slot-scope="item">
          <el-tag size="mini" type="danger">{{item.row.team_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="来源" width="80px" prop="source"></el-table-column>
      <el-table-column label="报名时间" prop="create_time"></el-table-column>
      <el-table-column label="操作" width="90px">
        <template slot-scope="item">
          <el-button size="mini" icon="el-icon-view" @click="see(item.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        background
        small
        :current-page="list.current_page"
        :page-size="list.per_page"
        layout="total, prev, pager, next, jumper"
        :total="list.total"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <!-- 模态框 -->
    <el-dialog :visible.sync="view_model" title="报名信息" width="500px" :append-to-body	="true" @close="closeModel">
      <form-view :form_data="view_data" @save="saveInfo()"></form-view>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";
import formView from './user-edit.vue';

export default {
  components: { windowTitle , formView},
  props: { type: {}, active_id: {} },
  data() {
    return {
      activeName : '0',
      group_id: 0,
      mobile: "",
      team_list: [
        { name: "全部", id: 0 },
        { name: "男子十公里", id: 1 },
        { name: "亲子组", id: 2 },
        { name: "情侣组", id: 3 },
        { name: "男女接力赛", id: 4 }
      ],
      list: {
        current_page: 1,
        data: []
      },
      set_list: [],
      all_num : 0,
      verify_num : 0,
      agree_num : 0,
      refuse_num : 0,
      load : true,
      view_model : false,
      view_data : {}
    };
  },
  mounted() {
    this.getData();
    this.getTeamInfo();
  },
  methods: {
    //获取活动组别信息
    getTeamInfo(){
      this.ajaxs('active/getTeamInfo',{
        data:{active_id : this.active_id},
        success:(res) => {
          this.team_list = res.msg;
          this.team_list.unshift({name : '全部' , 'id' : 0});
        }
      });
    },
    //查询
    search(){
      this.list.current_page = 1;
      this.getData();
    },
    //保存信息
    saveInfo(){
      this.view_model = false;
      this.getData();
    },
    //模态框关闭
    closeModel(){
      this.view_data = [];
    },
    //查看报名信息
    see(data){
      this.view_model = true;
      this.view_data = data;
    },
    //获取列表数据
    getData() {
      this.load = true;
      this.ajaxs("active/getActiveUser", {
        data: { page: this.list.current_page, id: this.active_id , status : this.activeName , mobile : this.mobile ,team_id : this.group_id},
        success: res => {
          this.load = false;
          this.list = res.msg.list;
          this.all_num = res.msg.all;
          this.agree_num = res.msg.agree;
          this.refuse_num = res.msg.refuse;
        }
      });
    },
    //分页
    changePage(e) {
      this.list.current_page = e;
      this.getData();
    },
    //判断表格单行是否可以被选中
    setIsSelect(row, index) {
      if (this.list.data[index].status != 0) return false;
      return true;
    },
    //全选、反选
    handleSelectionChange(e) {
      this.set_list = [];
      for (var i in e) {
        this.set_list.push(e.id);
      }
    },
    //切换审核状态
    handleClick(){
      this.list.current_page = 1;
      this.getData();
    }
  }
};
</script>

<style>
</style>